<template>
  <div>
    <div class="nav">
      <li
        is="hm-widget-text"
        class="nav-list"
        v-for="(item, key) in signList"
        :key="key"
        v-items="item"
        :title="item.title"
        :flag="item.flag"
        data-sign="nav"
        @vFocus="focus"
        @vBlur="vblur"
      ></li>
    </div>
    <ul class="cont">
      <li
        is="hm-widget-text"
        class="cont-list"
        v-for="item in list"
        :key="item.id"
        v-items="item"
        :title="item.title"
        :flag="item.flag"
        @vFocus="focus"
        @vBlur="vblur"
      ></li>
    </ul>
    <div class="tip" v-show="tipFlag">
      <div
        is="hm-widget-text"
        v-for="item in tipList"
        :key="item.id"
        v-items="item"
        :title="item.title"
        :flag="item.flag"
        @vFocus="focus"
        @vBlur="vblur"
        data-popup="tip"
      ></div>
    </div>
  </div>
</template>
<script>
import widgetText from "@/components/widgetText.vue";
import { axiosGet } from "@/global/request";
export default {
  name: "index",
  components: {
    [widgetText.name]: widgetText,
  },
  data() {
    return {
      tipFlag: false,
      list: [],
      tipList: [],
      signList: [],
    };
  },
  methods: {
    initEvent() {
      this.$Focus.keyEnter = () => {
        const tempObj = this.$Focus.pointer.data;
        if (tempObj.layout === "popup") {
          this.tipFlag = true;
          this.$Focus.openPop("tip");
        } else if (tempObj.layout === "close") {
          this.tipFlag = false;
          this.$Focus.closePop();
        } else if (tempObj.link) {
          this.$router.push(tempObj.link);
        }
      };
    },
    focus(pointer) {
      pointer.data.flag = true;
    },
    vblur(pointer) {
      pointer.data.flag = false;
    },
    pageload() {
      this.$PageLoad.close();
      this.initEvent();
    },
  },
  mounted() {
    this.pageload();
  },
  created() {
    axiosGet("/js/index.json", (res) => {
      this.list = res.data;
      this.tipList = res.popup;
      this.signList = res.sign;
      this.$Focus.initFocus(0, 0);
    });
  },
  activated() {
    this.pageload();
  },
};
</script>
<style lang="scss" scoped>
.nav {
  padding: 20px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-around;
  text-align: center;
}
.cont {
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  text-align: center;
}
.tip {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  padding: 50px;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
}
</style>
